<html>
  <head>
    <script src="/cosmopolite/static/cosmopolite.js" charset="UTF-8"></script>
    <style>
a {
  text-decoration: none;
}
    </style>
  </head>
  <body>
    <div>Google user: <span id="google_user"></span></div>

    <div>
      Subject: <input type="text" id="subject">
      <input type="button" id="subscribe" value="Subscribe">
    </div>
    <div>
      <select id="subscriptions"></select>
      <input type="button" id="unsubscribe" value="Unsubscribe">
    </div>

    <hr>

    <div>
      Message: <input type="text" id="message">
    </div>
    <div>
      Key: <input type="text" id="key">
    </div>
    <div>
      <input type="button" id="send" value="Send">
    </div>

    <hr>

    <div id="keys"></div>

    <hr>

    <div id="messages"></div>

    <script>
var subject = document.getElementById('subject');
var subscriptions = document.getElementById('subscriptions');

var message = document.getElementById('message');
var key = document.getElementById('key');

var keys = document.getElementById('keys');

var messages = document.getElementById('messages');

var addMessage = function(message) {
  var messageDiv = document.createElement('div');
  messageDiv.appendChild(document.createTextNode(
    (new Date(message['created'] * 1000)).toString() +
    ' <????-' + (Math.abs(message['sender'].hashCode()) % 10000) + '> ' +
    message['message']
  ));
  messages.appendChild(messageDiv);
};

window.addEventListener('load', function() {
  var googleUser = document.getElementById('google_user');

  var callbacks = {
    onLogin: function(username, logout_url) {
      googleUser.innerHTML =
        username +
        ' <a href="' + logout_url + '" target="_blank">(log out)</a>';
    },
    onLogout: function(login_url) {
      googleUser.innerHTML =
        '<a href="' + login_url + '" target="_blank">(log in)</a>';
    },
    onMessage: function(message) {
      if (subscriptions.value != message['subject']['name']) {
        return;
      }
      addMessage(message);
      if (message['key']) {
        var i;
        for (i = 0; i < keys.childNodes.length; i++) {
          var key = keys.childNodes[i];
          if (key.message['key'] == message['key']) {
            // Overwrite
            key.replaceChild(
              document.createTextNode(message['message']),
              key.childNodes[1]);
            break;
          }
        }
        if (i == keys.childNodes.length) {
          var keyDiv = document.createElement('div');
          keyDiv.appendChild(document.createTextNode(message['key'] + ' = '));
          keyDiv.appendChild(document.createTextNode(message['message']));
          keyDiv.message = message;
          keys.appendChild(keyDiv);
        }
      }
    },
  };

  var debug = new Cosmopolite(callbacks);

  document.getElementById('subscribe').addEventListener('click', function() {
    debug.subscribe(subject.value, -1);
    var option = document.createElement('option');
    option.text = subject.value;
    subscriptions.options.add(option);
    subscriptions.dispatchEvent(new CustomEvent('change'));
  });

  document.getElementById('unsubscribe').addEventListener('click', function() {
    debug.unsubscribe(subscriptions.value);
    subscriptions.options.remove(subscriptions.options.selectedIndex);
    subscriptions.dispatchEvent(new CustomEvent('change'));
  });

  document.getElementById('send').addEventListener('click', function() {
    debug.sendMessage(subscriptions.value, message.value, key.value);
  });

  document.getElementById('subscriptions').addEventListener('change', function() {
    messages.innerHTML = '';
    if (!subscriptions.value) {
      return;
    }
    debug.getMessages(subscriptions.value).forEach(addMessage);
  });

});
    </script>
  </body>
</html>
